<template>
    <div id="init-viewer-wrapper">
    </div>
</template>
  
<script>
export default {
    name: 'CameraControl',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("init-viewer-wrapper", {
                terrainProvider: new window.Cesium.CesiumTerrainProvider({
                    url: 'http://data.mars3d.cn/terrain',
                    requestWaterMask: true,
                    requestVertexNormals: true
                }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });

            const scene = window.viewer.scene;
            const ellipsoid = scene.globe.ellipsoid;
            const canvas = window.viewer.canvas;
            canvas.setAttribute("tabindex", "0"); //使canvas获得键盘焦点
            canvas.onclick = function () {
                canvas.focus();
            };

            const flags = {
                moveForward: false,
                moveBackward: false,
                moveUp: false,
                moveDown: false,
                moveLeft: false,
                moveRight: false,
                lookUp: false,
                lookDown: false,
                lookLeft: false,
                lookRight: false
            };
            //W:前进  S:后退  A:左移  D:右移  
            //上:向上翻转  下:向下翻转  右:向右转动  左:向左转动
            //Q:上升  E:下降
            document.addEventListener(
                "keydown",
                function (e) {
                    switch (e.keyCode) {
                        case "W".charCodeAt(0):
                            flags.moveForward = true
                            return
                        case "S".charCodeAt(0):
                            flags.moveBackward = true
                            return
                        case "Q".charCodeAt(0):
                            flags.moveUp = true
                            return
                        case "E".charCodeAt(0):
                            flags.moveDown = true
                            return
                        case "D".charCodeAt(0):
                            flags.moveRight = true
                            return
                        case "A".charCodeAt(0):
                            flags.moveLeft = true
                            return
                        case 38:
                            flags.lookUp = true
                            return
                        case 40:
                            flags.lookDown = true
                            return
                        case 37:
                            flags.lookLeft = true
                            return
                        case 39:
                            flags.lookRight = true
                            return
                    }
                },
                false
            );

            document.addEventListener(
                "keyup",
                function (e) {
                    switch (e.keyCode) {
                        case "W".charCodeAt(0):
                            flags.moveForward = false
                            return
                        case "S".charCodeAt(0):
                            flags.moveBackward = false
                            return
                        case "Q".charCodeAt(0):
                            flags.moveUp = false
                            return
                        case "E".charCodeAt(0):
                            flags.moveDown = false
                            return
                        case "D".charCodeAt(0):
                            flags.moveRight = false
                            return
                        case "A".charCodeAt(0):
                            flags.moveLeft = false
                            return
                        case 38:
                            flags.lookUp = false
                            return
                        case 40:
                            flags.lookDown = false
                            return
                        case 37:
                            flags.lookLeft = false
                            return
                        case 39:
                            flags.lookRight = false
                            return
                    }
                },
                false
            );

            window.viewer.clock.onTick.addEventListener(function () {
                const camera = window.viewer.camera;

                const cameraHeight = ellipsoid.cartesianToCartographic(
                    camera.position
                ).height;
                const moveRate = cameraHeight / 100.0;

                if (flags.moveForward) {
                    camera.moveForward(moveRate);
                }
                if (flags.moveBackward) {
                    camera.moveBackward(moveRate);
                }
                if (flags.moveUp) {
                    camera.moveUp(moveRate);
                }
                if (flags.moveDown) {
                    camera.moveDown(moveRate);
                }
                if (flags.moveLeft) {
                    camera.moveLeft(moveRate);
                }
                if (flags.moveRight) {
                    camera.moveRight(moveRate);
                }
                if (flags.lookUp) {
                    camera.lookUp(0.003);
                }
                if (flags.lookDown) {
                    camera.lookDown(0.003);
                }
                if (flags.lookLeft) {
                    camera.lookLeft(0.003);
                }
                if (flags.lookRight) {
                    camera.lookRight(0.003);
                }
            });
        }
    }
}
</script>
  
<style>
#init-viewer-wrapper {
    width: 100%;
    height: 100%;
}
</style>
  